<script setup lang="ts">

import JavaEditor from "@/components/JavaEditor.vue";
import {onMounted, reactive, ref} from "vue";
import {useProblemStore} from "@/stores/problem.ts";
import {useProblemCodeStore} from "@/stores/problem-code.ts";
import {ElMessage} from "element-plus";

const problemCodeForm = reactive({
    problemId: '',
    language: 1,
    mainFunction: '',
    userFunction: ''
})

const userEditorRef = ref<InstanceType<typeof JavaEditor> | null>(null)

const mainEditorRef = ref<InstanceType<typeof JavaEditor> | null>(null)

const problemStore = useProblemStore();
const problemCodeStore = useProblemCodeStore();

onMounted(async function () {
  problemCodeForm.problemId = problemStore.problemId
  try {
    await getProblemCode()
    if (userEditorRef.value) {
      userEditorRef.value.setCode(problemCodeForm.userFunction)
    }
    if (mainEditorRef.value) {
      mainEditorRef.value.setCode(problemCodeForm.mainFunction)
    }
  } catch (e) {

  }
})

async function getProblemCode () {
  await problemCodeStore.initProblemCodeService(problemCodeForm.problemId, problemCodeForm.language)
  problemCodeForm.mainFunction = problemCodeStore.mainFunction
  problemCodeForm.userFunction = problemCodeStore.userFunction
}

async function saveProblemCode () {
  if (userEditorRef.value) {
    problemCodeForm.userFunction = userEditorRef.value.code
  }
  if (mainEditorRef.value) {
    problemCodeForm.mainFunction = mainEditorRef.value.code
  }
  console.log(problemCodeForm)
  try {
    // if (problemCodeStore.userFunction.trim() === '' || problemCodeStore.mainFunction.trim() === '') {
    //   await problemCodeStore.saveProblemCodeService(problemCodeForm)
    // } else {
    //   await problemCodeStore.updateProblemCodeService(problemCodeForm)
    // }
    try {
      await problemCodeStore.initProblemCodeService(problemCodeForm.problemId, problemCodeForm.language)
      await problemCodeStore.updateProblemCodeService(problemCodeForm)
    } catch (e) {
      await problemCodeStore.saveProblemCodeService(problemCodeForm)
      return
    }
    ElMessage.success('保存成功')
  } catch (e:any) {
    ElMessage.error(e)
  }
}
</script>

<template>
  <div class="container">
    <div class="top">
      <div class="left">
        <span>选择语言: </span>
        <el-select v-model="problemCodeForm.language" placeholder="选择语言" style="width: 200px;">
          <el-option label="Java" :value="1"/>
        </el-select>
      </div>
      <div class="right">
        <el-button type="primary" @click="saveProblemCode()">
          保存
          <el-icon class="el-icon--right">
            <Upload/>
          </el-icon>
        </el-button>
      </div>
    </div>
    <div class="center">
      <el-alert title="用户可见的函数模板" type="info" :closable="false"/>
      <div class="editor"><JavaEditor ref="userEditorRef" /></div>
    </div>
    <div class="bottom">
      <el-alert title="用户不可见, 后台执行的main方法和静态内部类等, 辅助执行目标方法, 输出判题结果. 可使用fastjson2和lombok" type="info" :closable="false"/>
      <div class="editor"><JavaEditor ref="mainEditorRef"/></div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  width: 1000px;
  .top {
    display: flex;
    justify-content: center;
    .left {
      margin-right: 30px;
      span {
        margin-right: 10px;
      }
    }
  }
  .center {
    margin-top: 20px;
    margin-bottom: 20px;
    .editor {
      height: 300px;
    }
  }
  .bottom {
    .editor {
      height: 300px;
    }
  }
}
</style>